<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>神灯速贸</title>
        <meta name="viewport" content="width=device-width,initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no,minimal-ui" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta content="telephone=no" name="format-detection" />
        <meta name="msapplication-tap-highlight" content="no"/>
        <link rel="stylesheet" href="../css/public.css">
        <link rel="stylesheet" href="../css/animate.css">
        <link rel="stylesheet" href="../css/main.css">
        <script src="../js/zepto.min.js"></script>
        <script src="../js/iscroll.js"></script>
        <script src="../js/main.js"></script>
    </head>
    <body>
	    <header class="header" style="display: block;">
	        <div class="title">新增报价</div>
	        <a class="btn-back" href="#"></a>
	    </header>
			
	    <div class="container sku-page quote-page">
			<div class="sku-notice"></div>
			<ul class="sku-detail">
				<li class="table">
					<a class="cell arrow " href="#">
						<em>币种</em>
						<span>人民币</span>
					</a>
				</li>
				<li class="table">
					<a class="cell noborder-b" href="#">
						<em>数量</em>
						<span><input class="quote-input" value="100" />KG</span>
					</a>
				</li>
				<li class="table">
					<a class="cell arrow-down btn-plugin" href="#">
						<em>包干价格</em>
						<span id="price-type">一口价</span>
					</a>
				</li>
				<li class="table price price1 active">
					<a class="cell" href="#">
						<em>填写价格</em>
						<span><input class="quote-input" />元/千克</span>
					</a>
				</li>
				<li class="table price price2">
					<a class="cell" href="#">
						<em>填写价格</em>
						<span><input class="quote-input" />至<input class="quote-input" />元/千克</span>
					</a>
				</li>
				<li class="table price price3">
					<a class="cell" href="#">
						<em>填写价格</em>
						<span>议价</span>
					</a>
				</li>
			</ul>
			
	    </div> 
	    <div class="scroller-plugin-wrapper animated ">
        	<div class="active-border"></div>
        	<div class="scroller-plugin scroll-wrapper active">
        		<div class="scroller">
        			<a class="opation active" href="#">一口价</a>
        			<a class="opation" href="#">价格区间</a>
        			<a class="opation" href="#">议价</a>
        		</div>
        	</div>
        	<a class="btn-close" href="#">Done</a>
        </div>

        <script>
            $(function(){
            	$(".container").height(h - 44)
                var plugin = new IScroll(".scroller-plugin", {
                    scrollX: false,
                    scrollY: true,
                    momentum: false,
                    snap: true,
                    snapSpeed: 400
                });
                plugin.index = 1;
                plugin.on('scrollEnd', function () {
                	plugin.index = (0 - plugin.y) / 30 + 1;
                	console.log(plugin.index);
				});

				$(".btn-close").tap(function(){
					$(".price").removeClass("active");
					$(".price" + plugin.index).addClass("active");
				    $(".scroller-plugin-wrapper").fadeOut();
				})

				$(".btn-plugin").tap(function(){
					$(".scroller-plugin-wrapper").fadeIn();
				})
            })
        </script>
    </body>
</html>